<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>LocalStorage</title>
  </head>
  <body>
    <h2>LocalStorage</h2>
    <button onclick="saveData()">点我存储数据</button>
    <br />
    <br />
    <button onclick="getData()">点我获取数据</button>
    <br />
    <br />
    <button onclick="removeData()">点我删除一个数据</button>
    <br />
    <br />
    <button onclick="clearData()">点我删除所有数据</button>
    <!-- 
  sessionStorage和localStorage的区别
        sessionStorage:关闭浏览器后里面的数据就会被清除掉   而lcoalstorage不会,  lcoalstorage则是手动清除后里面的数据才会清除掉
        
        sessionStorage和localStorage的api一模一样
 -->
    <script type="text/javascript">
      let person = { name: '张三', age: 18 };
      function saveData() {
        localStorage.setItem('msg', '张三');
        localStorage.setItem('mgs1', 666);
        localStorage.setItem('person', JSON.stringify(person));
      }

      function getData() {
        console.log(localStorage.getItem('msg'));
        console.log(localStorage.getItem('mgs1'));
        result = localStorage.getItem('person');
        console.log(JSON.parse(result));
      }

      function removeData() {
        localStorage.removeItem('msg');
      }

      function clearData() {
        localStorage.clear();
      }
    </script>
  </body>
</html>
